<md-toolbar md-theme="{{main.theme}}" md-theme-watch="true">
  <div class="md-toolbar-tools">
    <md-button class="md-icon-button" aria-label="{{main.$i18n.settings}}" ng-click="main.toggleMenu($event)" ng-disabled="!main.settings">
      <md-icon>menu</md-icon>
    </md-button>
    <h2 class="md-title">
      <span>{{main.title}}</span>
    </h2>
    <span flex></span>
    <md-button class="md-icon-button" aria-label="{{main.$i18n.templates}}" ng-click="main.sync($event)" ng-show="main.view === 'templates' && !main.syncing" ng-disabled="main.syncing">
      <md-icon>sync</md-icon>
      <md-tooltip>同步模板</md-tooltip>
    </md-button>
    <md-progress-circular md-mode="indeterminate" ng-show="main.syncing"></md-progress-circular>
  </div>
</md-toolbar>
<md-sidenav class="md-sidenav-left md-whiteframe-z1" md-component-id="menu">
  <md-list>
    <md-list-item ng-click="main.navigateTo('/messages')">
      <md-icon>message</md-icon>
      <p>{{main.$i18n.messages}}</p>
    </md-list-item>
    <md-list-item ng-click="main.navigateTo('/templates')">
      <md-icon>list</md-icon>
      <p>{{main.$i18n.templates}}</p>
    </md-list-item>
    <md-divider></md-divider>
    <md-list-item ng-click="main.showSettings()">
      <md-icon>settings</md-icon>
      <p>{{main.$i18n.settings}}</p>
    </md-list-item>
    <md-divider></md-divider>
    <md-list-item ng-click="main.navigateTo('help')">
      <md-icon>help</md-icon>
      <p>{{main.$i18n.help}}</p>
    </md-list-item>
  </md-list>
</md-sidenav>